.border-image-clip-path {
  width: 200px;
  height: 100px;
  margin: auto;
  border: 10px solid;
  border-radius: 10px;
  border-image: linear-gradient(135deg, #0061ff, #ff00f2) 1;
  clip-path: inset(0 round 10px);
  animation: demo-huerotate 60s infinite linear;
  filter: hue-rotate(360deg);
}

@keyframes demo-huerotate {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

.fillet-gradient-border {
  background: #fff;
  width: 200px;
  height: 200px;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
  position: relative;

  &::before {
    inset: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    z-index: -1;
    border-radius: 8px;
    background: linear-gradient(135deg, #0061ff, #ff00f2);
  }

  > .inner {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: #fff;
  }
}

/* wave-animation */
.wave-animation {
  padding: 10px;
  margin: auto;
  width: 400px;
  height: 200px;
  // outline: 2px dashed gray;
  --c: #2196f3;
  --w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%)
    no-repeat;

  background: var(--w1), var(--w2), var(--w1), var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  animation: wave-animation 2s infinite linear;
}

@keyframes wave-animation {
  0% {
    background-position-x: -200%, -100%, 0%, 100%;
  }

  100% {
    background-position-x: 0%, 100%, 200%, 300%;
  }
}

/* 波浪动画集合 */
.wave-animation-set {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;

  .wave-animation {
    position: absolute;
    inset: 0;
    border: none;

    &:first-child {
      // transform: scaleY(1.2);
    }

    &:nth-child(2) {
      // transform: scaleY(1.5);
      animation-delay: 0.25s;
    }

    &:nth-child(3) {
      // transform: scaleY(.5);
      animation-delay: 0.5s;
    }
  }
}
